<template>
  <div class="devicebigbox">
    <div class="topbox" :style="{height:isheight+'px'}">
      <div>
        <el-form :model="form" ref="form"  label-position="left" label-width="80px" onsubmit="return false">
           <el-row :gutter="20">
            <el-col :span="5">
                <el-form-item label="用电企业">
                  <!-- <el-select v-model="form.orgNo" style="width: 100%;" size="small" filterable  ref="qiye" @change="changeqiye">
                    <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo"></el-option>
                  </el-select> -->
                  <FilterSelect2
                    v-model="form.orgNo"
                    :optionlist="qiyelist"
                    @updateModelValue="changeqiye"
                    :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="设备规约">
                  <!-- <el-select v-model="form.terminalType" style="width: 100%;" size="small" >
                    <el-option v-for="(item,index) in peilist" :key="index" :label="item.text" :value="item.value"></el-option>
                  </el-select> -->
                  <FilterSelect2
                    v-model="form.terminalType"
                    :optionlist="peilist"
                    :valuekey="{ name: 'text', value: 'value' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="逻辑地址">
                  <el-input v-model="form.logicalAddress" style="width: 100%;" size="small"></el-input>
                </el-form-item>
              </el-col>
                <el-col :span="6">
                <el-form-item label="状态">
                <el-radio-group v-model="form.terminalState" @change="changeradio">
                  <el-radio :label="''">全部</el-radio>
                  <el-radio :label="1">在线</el-radio>
                  <el-radio :label="2">离线</el-radio>
                </el-radio-group>
              </el-form-item>
              </el-col>
              <el-col :span="3" style="text-align: right;margin-top: 4px;">
                <el-button @click="chongzhi" size="small">重 置</el-button>
                <el-button @click="submit" size="small" type="primary">查 询</el-button>
              </el-col>
           </el-row>
        </el-form>
        </div>
     </div>
     <div class="bodybox">
       <div style="display: flex; justify-content: space-between;">
        <div style="font-size: 18px; font-weight: 700;">设备工况信息</div>
        <div  class="tabbar">
          <el-button @click="daochu" type="primary" size="small"  ><i class="el-icon-upload2" >导出</i></el-button>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <span style=" cursor: pointer;margin: 0 10px;" @click="shuaxin"><i class="el-icon-refresh-right"></i></span>
          </el-tooltip>
          <el-dropdown trigger="click" @command="command">
          <span class="el-dropdown-link">
            <el-tooltip class="item" effect="dark" content="密度" placement="top">
            <span style=" cursor: pointer;"><i class="el-icon-d-caret"></i></span>
          </el-tooltip>
          </span>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item command="默认">默认</el-dropdown-item>
            <el-dropdown-item command="中等">中等</el-dropdown-item>
            <el-dropdown-item command="紧凑">紧凑</el-dropdown-item>
          </el-dropdown-menu>
         </el-dropdown>
        </div>
       </div>
       <div class="mokuai">
        <div class="little">
          <div>
            <div>设备数</div>
            <p><span class="text">{{ entity.totalCount }}</span>（个）</p>
          </div>
          <div>
            <img  src="../../../../assets/statis/shebei.png" alt="">
          </div>
        </div>
        <div class="little" @click="tofilter('')">
          <div>
            <div>已激活</div>
            <p><span class="text">{{ entity.activateCount }}</span>（个）</p>
          </div>
          <div>
            <img src="../../../../assets/statis/jihuo.png" alt="">
          </div>
        </div>
        <div class="little" @click="tofilter(1)">
          <div class="shaowei">
            <div>在线 <span class="green"></span></div>
            <p><span class="text">{{ entity.onlineCount }}</span>（个）</p>
          </div>
          <div>
            <img src="../../../../assets/statis/zaixianshu.png" alt="">
          </div>
        </div>
        <div class="little" @click="tofilter(2)">
          <div class="shaowei">
            <div>离线 <span class="red"></span></div>
            <p><span class="text">{{ entity.offlineCount }}</span>（个）</p>
          </div>
          <div>
            <img src="../../../../assets/statis/lixian.png" alt="">
          </div>
        </div>
        <div class="little">
          <div>
            <div>在线率</div>
            <p><span class="text">{{ entity.onlineRate }}</span>（%）</p>
          </div>
          <div>
            <img src="../../../../assets/statis/zaixianlv.png" alt="">
          </div>
        </div>
       </div>
       <div class="table" style="height: 68%;">
        <template>
          <el-table
          :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
            :data="tableData"
            border
             height="calc(100% - 1px)"
            v-loading="loading"
            :size="iissize"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              fixed
              width="60">
            </el-table-column>
            <el-table-column
              prop="deviceName"
              fixed
              label="设备名称"
              width="210">
            </el-table-column>
            <el-table-column
              prop="protocol"
              label="设备规约"
              width="170">
              <!-- <template #default="{row}">
                {{ peilist.filter(ele=>ele.value==row.protocol )[0].text}}
              </template> -->
            </el-table-column>
            <el-table-column
              prop="companyName"
              label="所属企业"
              width="260">
            </el-table-column>
            <el-table-column
              prop="logicAddress"
              label="逻辑地址"
              width="130">
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态">
              <template #default="{row}">
                <div class="littlespan" v-if="row.status==='1'"><span class="zaixian"></span><span>在线</span></div>
                <div class="littlespan" v-else><span class="lixian" style="line-height: 30px;"></span><span>离线</span></div>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              width="200"
              label="表计工况">
              <template #default="{row}">
                <div @click="biaoji(row)" style="cursor: pointer;">
                 <span>
                    <span class="zaixian"></span>
                    <span style="width: 50px;display: inline-block;">
                      {{ tablelist.filter(ele=>ele.parentdev==row.deviceId)[0]?.meterCount.split('|')[0] }} 台</span>
                  </span>
                 &nbsp;&nbsp;&nbsp;
                 <span>
                  <span class="lixian"></span>
                  <span style="width: 50px;display: inline-block;">
                    {{ tablelist.filter(ele=>ele.parentdev==row.deviceId)[0]?.meterCount.split('|')[1] }} 台</span>
                </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="clientAddress"
              label="客户端地址"
              width="200">
            </el-table-column>
            <el-table-column
              prop="lastReadTime"
              label="最后通讯时间"
              width="180">
            </el-table-column>
          </el-table>
        </template>
        <div style="margin-top: 10px;text-align: right;">
              <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="formlist._pageNo"
                :page-size="10"
                @current-change="getdatalist"
                :total="+totalCount">
              </el-pagination>
              <!-- <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.page"
                :page-size="20"
                @current-change="getlist"
                :total="+totalCount">
              </el-pagination> -->
            </div>
       </div>
       <!-- 表计弹框 -->
       <div>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="70%">
          <div>
            <div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
              <span @click="daochubiaoji"><el-button type="primary" size="small">导出</el-button></span>
              <span @click="dialogVisible=false"><i class="el-icon-close"></i></span>
            </div>
            <div>
              <template>
          <el-table
            :header-cell-style="{background:'#f5f5f5'}"
            :data="tableDatalist"
            border
            v-loading="loadings"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              type="index"
              align="center"
              label="序号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="name"
              label="表计"
              >
            </el-table-column>
            <el-table-column
              prop="parentdevName"
              label="网关"
              width="250">
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              >
              <template #default="{row}">
                <div class="littlespan" v-if="row.status=='1'"><span class="zaixian"></span><span>在线</span></div>
                <div class="littlespan" v-else><span class="lixian" ></span><span>离线</span></div>
              </template>
            </el-table-column>
            <el-table-column
              prop="sourceaddr"
              label="表计地址"
              width="220">
            </el-table-column>
            <el-table-column
              prop="lastReadTime"
              label="最后通讯时间"
              >
            </el-table-column>
          </el-table>
        </template>
            </div>
            <div style="margin-top: 10px;text-align: right;">
              <el-pagination
              layout="prev, pager, next"
                :current-page.sync="formlists._pageNo"
                :page-size="10"
                @current-change="getgongkuanglist"
                background
                :total="+totalCounts">
              </el-pagination>
            </div>
          </div>
        </el-dialog>
       </div>
     </div>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import {
  getzhongapi, getyonghuxialaapi, gettablelistapi, getguiyueapi,
  exportgaojinlistapi, getbiaojilistapi, getgongkuangbjlistapi,exportbiaojilistapi,getguiyuexialaapi
} from '@/api/ElectricalDistribution/device'

export default {
  name: 'ReportFormsIndex',
  data() {
    return {
      totalCount:'',
      form:{terminalState:'',orgNo:''},
      isshow: false,
      isheight: 80,
      qiyelist: [],
      peilist: [],
      iissize: 'medium',
      tableData: [],
      formlist: {
        _pageNo: 0,
        _pageSize:10
      },
      formlists: {
        _pageNo: 0,
        _pageSize:10
      },
      loading: false,
      entity: {},
      tablelist: [],
      dialogVisible: false,
      tableDatalist: [],
      loadings: false,
      row: {},
      orgNo: '',
      totalCounts:''
    };
  },

  async mounted() {
    this.getdatalist()
    const ress = await getyonghuxialaapi()
    this.qiyelist = ress.data.list
    this.qiyelist.unshift({bizOrgName:'全部',bizOrgNo:''})
    console.log(this.qiyelist);
    // this.form.orgNo=ress.data.list[0].bizOrgNo
    const guiyue = await getguiyuexialaapi()
    console.log(guiyue);
    this.peilist= guiyue.data.list
    const res= await getzhongapi()
    this.entity = res.data.entity

  },
  methods: {
    // 获取表格数据
    async getdatalist() {
      this.loading = true
      // this.orgNo=this.form.orgNo
      const table = await gettablelistapi({ _pageNo:this.formlist._pageNo-1,_pageSize:this.formlist._pageSize, ...this.form })
      this.tableData = table.data.list
      this.totalCount=table.data.totalCount
      const arr=this.tableData.map(ele => {
        return ele.deviceId
      })
      const res = await getbiaojilistapi({terminalIds:arr.join(',')})
     this.tablelist=res.data.list
    this.loading=false
    },
    tofilter(val) {
      this.$set(this.form, 'terminalState', val)
      this.getdatalist()
    },
    changeqiye(val) {
      console.log(val);
    },
    //弹框
    async biaoji(row) {
      this.row = row
      this.formlists._pageNo=0
      this.getgongkuanglist()
    },
    async getgongkuanglist() {
      this.loadings=true
      this.dialogVisible = true
      console.log(this.formlists._pageNo);
      const res = await getgongkuangbjlistapi({
        _pageNo: this.formlists._pageNo?this.formlists._pageNo - 1:0
        , _pageSize: this.formlists._pageSize, terminalId: this.row.deviceId
      })
      this.totalCounts=res.data.totalCount
      this.tableDatalist = res.data.list
      this.loadings=false
    },
    async daochubiaoji() {
      const res = await exportbiaojilistapi({ terminalId: this.row.deviceId,orgNo: this.row.companyNo,isParams: true})
      const blobContent = new Blob([res])
      let url = window.URL.createObjectURL(blobContent)
      saveAs(url, '工况页面表计信息列表.xls')
    },
    // 展开收起
    zedie () {
      this.isshow = !this.isshow
      if (this.isshow) {
        this.isheight = 140
      } else {
        this.isheight = 80
      }
    },
    changeradio(val) {
      console.log(val);
    },
    // 查询
    async submit() {
      this.getdatalist()
    },
    // 调节表格
    command(val) {
      console.log(val);
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    // 刷新
    shuaxin() {
      this.$message.success('列表刷新成功')
      this.getdatalist()
    },
    // 重置
    chongzhi() {
      this.form = {}
      this.form.terminalState = ''
      this.getdatalist()
    },
    // 导出
    async daochu() {
      const res = await exportgaojinlistapi({...this.form,  isParams: true })
      const blobContent = new Blob([res])
      let url = window.URL.createObjectURL(blobContent)
      saveAs(url, '工况信息列表.xls')
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header{
  display: none;
}
.zaixian{
  display: inline-block;
  margin: 0 10px 0 5px;
  width: 14px;
  height: 14px;
  background-color: #36b34b;
  border-radius: 50%;
}
.lixian{
  display: inline-block;
  margin: 0px 10px 0 5px;
  width: 14px;
  height: 14px;
  background-color: #e64545;
  border-radius: 50%;
}
.mokuai{
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  margin-bottom: 30px;
  .little{
    width: 19%;
    height: 100px;
    background-color: #f8fafd;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    img{
      width: 60px;
      height: 60px;
    }
    .text{
      color: #1a90fe;
      font-size: 20px;
    }
    .green{
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: #36b34b;
    }
    .red{
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: #e64545;
    }
  }
}
.devicebigbox{
  background-color: #f1f1f1;
  height: 100%;
  padding: 10px;
}
.topbox{
  background-color: #fff;
  padding: 20px ;
  height: 80px;
  box-sizing: border-box;
}
.bodybox{
  background-color: #fff;
  margin-top: 10px;
  height: calc(100% - 90px);
  padding: 20px;
}
</style>
